<template>
    <a-select v-model:value="value"  style="width: 200px" >
        <a-select-option :value="item" v-for="item in classMajor" >{{item}}</a-select-option>

    </a-select>

    <a-button type="primary"  @click="getClazz">查询</a-button>
    <a-button type="primary"  style="float: right" @click="addClazz">添加</a-button>

    <a-table :columns="columns" :data-source="teacherListDate" bordered>
        <template #bodyCell="{ column, text, record }">
            <template v-if="['name', 'age', 'address'].includes(column.dataIndex)">
                <div>
                    <a-input
                            v-if="editableData[record.key]"
                            v-model:value="editableData[record.key][column.dataIndex]"
                            style="margin: -5px 0"
                    />
                    <template v-else>
                        {{ text }}
                    </template>
                </div>
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
                <div class="editable-row-operations">
          <span v-if="editableData[record.key]">
            <a-typography-link @click="save(record.key)">Save</a-typography-link>
            <a-popconfirm title="Sure to cancel?" @confirm="cancel(record.key)">
              <a>Cancel</a>
            </a-popconfirm>
          </span>
                    <span v-else>
<!--            <a @click="edit(record.key)">Edit</a>-->
                        <a-button type="link"  @click="addStudent(record)">添加学生</a-button>
                        <a-button type="link"  @click="updateClazz(record)">修改</a-button>
                        <a-button type="link"  @click="deleteClazz(record)">删除</a-button>
          </span>
                </div>
            </template>
        </template>
    </a-table>


  <!--修改学生信息-->
    <div>

        <a-modal v-model:visible="visible" width="800px" title="修改学生信息" @ok="handleOk">
            <a-form
                    :model="formState"
                    v-bind="layout"
                    name="nest-messages"

                    @finish="handleOk"
            >
                <a-form-item name="classNo" label="班级号" >
                    <a-input v-model:value="formState.classNo" />
                </a-form-item>
                <a-form-item name="className" label="班级名称" >
                    <a-input v-model:value="formState.className" />
                </a-form-item>
                <a-form-item name="classMajor" label="专业" >
                    <a-input v-model:value="formState.classMajor" />
                </a-form-item>
                <a-form-item name="classPersonNum" label="人数" >
                    <a-input v-model:value="formState.classPersonNum" />
                </a-form-item>
                <a-form-item name="classTeacherName" label="辅导元姓名" >
                    <a-input v-model:value="formState.classTeacherName" />
                </a-form-item>
                <!--                <a-form-item name="classStatus" label="状态" >-->
                <!--                    <a-input v-model:value="addClazzList.classStatus" />-->
                <!--                </a-form-item>-->
                <a-form-item name="classStatus" label="状态" >
                    <a-select v-model:value="formState.classStatus"  style="width: 200px" >
                        <a-select-option value="1" >未毕业</a-select-option>
                        <a-select-option value="0" >已毕业</a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
<!--    添加班级信息-->
    <div>

        <a-modal v-model:visible="visibles" width="800px" title="添加班级" @ok="addClazzDate">
            <a-form
                    :model="addClazzList"
                    v-bind="layout"
                    name="nest-messages"

                    @finish="addClazzDate"
            >
                <a-form-item name="classNo" label="班级号" >
                    <a-input v-model:value="addClazzList.classNo" />
                </a-form-item>
                <a-form-item name="className" label="班级名称" >
                    <a-input v-model:value="addClazzList.className" />
                </a-form-item>
                <a-form-item name="classMajor" label="专业" >
                    <a-input v-model:value="addClazzList.classMajor" />
                </a-form-item>
                <a-form-item name="classPersonNum" label="人数" >
                    <a-input v-model:value="addClazzList.classPersonNum" />
                </a-form-item>
                <a-form-item name="classTeacherName" label="辅导元姓名" >
                    <a-input v-model:value="addClazzList.classTeacherName" />
                </a-form-item>
<!--                <a-form-item name="classStatus" label="状态" >-->
<!--                    <a-input v-model:value="addClazzList.classStatus" />-->
<!--                </a-form-item>-->
                <a-form-item name="classStatus" label="状态" >
                <a-select v-model:value="addClazzList.classStatus"  style="width: 200px" >
                    <a-select-option value="1" >未毕业</a-select-option>
                    <a-select-option value="0" >已毕业</a-select-option>
                </a-select>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>

    <!--    添加学生信息-->
    <div>

        <a-modal v-model:visible="addStudentVisible" width="800px" title="添加班级" @ok="addStudentDate">
            <a-form
                :model="addStudentList"
                v-bind="layout"
                name="nest-messages"

                @finish="addStudentDate"
            >
                <a-form-item name="studentNo" label="学生学号" >
                    <a-input v-model:value="addStudentList.studentNo" />
                </a-form-item>
                <a-form-item name="studentName" label="学生姓名" >
                    <a-input v-model:value="addStudentList.studentName" />
                </a-form-item>
                <a-form-item name="studentGender" label="性别" >
                    <a-input v-model:value="addStudentList.studentGender" />
                </a-form-item>
                <a-form-item name="studentAddress" label="家庭地址" >
                    <a-input v-model:value="addStudentList.studentAddress" />
                </a-form-item>
                <a-form-item name="studentBirthdate" label="出生年月" >
                    <a-input v-model:value="addStudentList.studentBirthdate" />
<!--                    <a-date-picker v-model:value="addStudentList.studentBirthdate" />-->
                </a-form-item>
                <a-form-item name="studentAcademicDuration" label="学制" >
<!--                    <a-input v-model:value="addStudentList.studentAcademicDuration" />-->
                    <a-select v-model:value="addStudentList.studentAcademicDuration"  style="width: 200px" >
                        <a-select-option value="1" >1</a-select-option>
                        <a-select-option value="2" >2</a-select-option>
                        <a-select-option value="3" >3</a-select-option>
                        <a-select-option value="4" >4</a-select-option>
                    </a-select>
                </a-form-item>
                <!--                <a-form-item name="classStatus" label="状态" >-->
                <!--                    <a-input v-model:value="addClazzList.classStatus" />-->
                <!--                </a-form-item>-->
                <a-form-item name="studentStatus" label="状态" >
                    <a-select v-model:value="addStudentList.studentStatus"  style="width: 200px" >
                        <a-select-option value="1" >在校</a-select-option>
                        <a-select-option value="2" >离校</a-select-option>
                        <a-select-option value="3" >休学</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item name="studentRemarks" label="备注" >
                    <a-input v-model:value="addStudentList.studentRemarks" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref, UnwrapRef} from "vue";
import myAxios from "../../plugins/myAxios";
import {message} from "ant-design-vue";
import {cloneDeep} from "lodash-es";
import dayjs from "dayjs";




const classMajor = ref([])
const value = ref()
const value1 = ref()


const teacherListDate = ref()
const getClazz = async () => {
    const res = await myAxios.post("/adminManageClassInfos/get/allClazz",{
        className:value.value
    })
    if (res.data){
        teacherListDate.value = res.data
        teacherListDate.value = teacherListDate.value.map(item=>{
            switch (item.studentStatus){
                case 1:
                    item.studentStatus = '未毕业'
                    break
                case 0:
                    item.studentStatus = '已毕业'
                    break

            }
            item.classDate = dayjs(item.classDate).format('YYYY-MM-DD')
            // item.teacherBirthdate = dayjs(item.teacherBirthdate).format('YYYY-MM-DD')
            return item
        })
    }else {
        message.error(res.message)
    }
}
onMounted(()=>{
    getTeacherDeptname()
})
const teacherDeptname = ref()
const getTeacherDeptname = async () =>{
    const res = await myAxios.get("/adminManageClassInfos/get/classMajor")
    if (res.data){
        classMajor.value = res.data
    }else {
        message.error(res.message)
    }
}
const studentClassNo = ref()



const columns = [

    {
        title: '序号',
        dataIndex: 'id',
        width: '6%',
    },
    {
        title: '班级号',
        dataIndex: 'classNo',
        width: '10%',
    },
    {
        title: '班级名称',
        dataIndex: 'className',
        width: '7%',
    },
    {
        title: '专业',
        dataIndex: 'classMajor',
        width: '5%',
    },
    {
        title: '人数',
        dataIndex: 'classPersonNum',
        width: '10%',
    },
    {
        title: '入学时间',
        dataIndex: 'classDate',
        width: '10%',
    },
    {
        title: '辅导元姓名',
        dataIndex: 'classTeacherName',
        width: '10%',
    },
    {
        title: '状态',
        dataIndex: 'classStatus',
        width: '10%',
    },
    {
        title: '操作',
        dataIndex: 'operation',
        width: '10%',
    },

];

interface DataItem {
    id: number;
    teacherNo: string;
    teacherName: string;
    teacherGender: string;
    teacherAddress: string;
    teacherBirthdate: string;
    teacherDeptname: string;
    arriveDate: string;
    teacherStatus: number;
    teacherRemarks: string;

}
const dataSource = ref(teacherListDate.value);
const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});

const edit = (studentNo: string) => {
    editableData[studentNo] = cloneDeep(dataSource.value.filter(item => studentNo === item.studentNo)[0]);
};
const save = async (studentNo: string) => {
    console.log(studentNo)
    Object.assign(dataSource.value.filter(item => studentNo === item.studentNo)[0], editableData[studentNo]);
    delete editableData[studentNo];
    // console.log(item)
    // const res = await myAxios.post("/teacher/saveScores",{
    //     ...item
    // })
    // if (res.data){
    //     message.success("操作成功")
    // }else {
    //     message.error("操作失败")
    // }
};
const cancel = (score: string) => {
    delete editableData[score];
};


const updateClazz = async (item:any) => {
    visible.value = true
    formState.value = item
    // console.log(item)
}


/**
 * 修改学生信息
 */
const visible = ref(false)
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const formState = ref();
const handleOk = async () => {
    const res = await myAxios.post("/adminManageClassInfos/update/clazz",{
        ...formState.value
    })
    if (res.data){
        message.success("修改成功")
        visible.value = false
    }else {
        message.error(res.message)
    }
}

const deleteClazz = async (item:any) => {

    delete item.classDate
    console.log(item)
    const res = await myAxios.post("/adminManageClassInfos/delete/clazz",{
      ...item
  })
    if (res.data){
        message.success("删除成功")
        getClazz()

    }else {
        message.error(res.message)
    }
    // message.success("此功能尚未开发！")
}


//添加班级
const addClazzList = ref({
    classNo:'',
    className:'',
    classMajor:'',
    classPersonNum:'',
    classTeacherName:'',
    classStatus:''
})
const visibles = ref(false)
const addClazz = async () => {
    visibles.value = true
}

const addClazzDate = async () => {
    const res = await myAxios.post("/adminManageClassInfos/add/clazz",{
        ...addClazzList.value
    })
    if (res.data){
        message.success("添加成功")
        visibles.value = false
    }else {
        message.error(res.message)
    }
}

//添加学生信息
const addStudentList = ref({
    studentNo:'',
    studentName:'',
    studentGender:'',
    studentAddress:'',
    studentBirthdate:'',
    studentMajor:'',
    studentClassNo:'',
    studentAcademicDuration:'',
    studentStatus:'',
    studentRemarks:'',
})
const addStudentVisible = ref(false)
const addStudent = async (item:any) => {
    addStudentVisible.value = true
    addStudentList.value.studentClassNo = item.classNo
    addStudentList.value.studentMajor = item.classMajor
}
const addStudentDate = async () => {
    // addStudentList.value.studentBirthdate = dayjs(addStudentList.value.studentBirthdate).format('YYYY-MM-DD')

    // console.log(addStudentList.value)
    const res = await myAxios.post("/adminManageInfos/addStudent",{
        ...addStudentList.value
    })
    if (res.code===0){
        message.success("添加成功")
        addStudentVisible.value = false
    }else {
        message.error(res.message)
    }
}
</script>

<style scoped>

</style>